<template>
  <div class="userinfo-container">
    <div class="top">
      <TopBar />
    </div>
    <div class="content">
      <div class="wrapper">
        <LayOut />
      </div>
    </div>
    <div class="footer">
      <Footer />
    </div>
    <div class="fix-nav">
      <FixNav />
    </div>
  </div>
</template>

<script setup lang="ts">
import TopBar from '@/components/top/top-bar/TopBar.vue';
import FixNav from '@/components/fix-nav/FixNav.vue';
import LayOut from './layout/LayOut.vue';
import Footer from '@/components/footer/footer.vue';

</script>

<style lang="less" scoped>
.userinfo-container {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .top {
    height: 88px;
  }

  .footer {
    height: 40px;
  }

  .fix-nav {
    height: 144px;
  }

  .content {
    // padding: 20px 0;
    flex: 1;
    width: 100%;
    background-color: #F5F7F9;

    .wrapper {
      margin: 20px auto;
      height: 94%;
      margin-bottom: 40px;
      width: 1552px;
      display: flex;
      flex-direction: row;
    }

    @media (max-width: 1552px) {
      .wrapper {
        width: 1296px;
      }
    }

    @media (max-width: 1296px) {
      .wrapper {
        width: 1040px;
      }
    }

  }

  .fix-nav {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
